<template>
  <section class="component query-loanInfo" ref="query-loanInfo">
    <p class="header-btn">
      <el-button type="text" icon="el-icon-refresh" @click="refreshData">请求最新数据</el-button>
    </p>
    <div>
      <h4>逾期金额明细</h4>
      <el-table :data="overdueAmountData" style="width: 100%">
        <el-table-column prop="overdueAmount" label="账户逾期金额" width="100" />
        <el-table-column prop="overdueCapital" label="账户逾期本金" width="100" />
        <el-table-column prop="overdueInterest" label="账户逾期利息" width="100" />
        <el-table-column prop="overdueFine" label="账户逾期罚息" width="100" />
        <el-table-column prop="overdueCompound" label="账户逾期复利" width="100" />
        <el-table-column prop="overdueOtherFee" label="账户逾期其他费用" width="120" />
        <el-table-column prop="caseMoney" label="账户总金额(试算)" />
      </el-table>
    </div>
    <div>
      <h4>逾期期数金额明细</h4>
      <el-table :data="overdueAmountData" style="width: 100%">
        <el-table-column prop="m0Amount" label="M0账户总金额" width="100" />
        <el-table-column prop="m1Amount" label="逾期1-30天" width="85" />
        <el-table-column prop="m2Amount" label="逾期31-60天" width="90" />
        <el-table-column prop="m3Amount" label="逾期61-90天" width="90" />
        <el-table-column prop="m4Amount" label="逾期91-120天" width="100" />
        <el-table-column prop="m5Amount" label="逾期121-150天" width="110" />
        <el-table-column prop="m6Amount" label="逾期151-180天" width="110" />
        <el-table-column prop="afterM6Amount" label="逾期180+天" width="90" />
      </el-table>
    </div>

    <div class="operate-buttons">
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import { namespace } from "vuex-class";
import { Vue, Component, Emit, Prop, Watch } from "vue-property-decorator";
import { PageService } from "~/utils/page.service";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class IouInformation extends Vue {
  @CollectionExecutionModule.State private caseNo;
  @CollectionExecutionModule.State private caseId;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(CaseOperatorPageService) private caseOperatorPageService: CaseOperatorPageService;
  private overdueAmountData: any = []
  private tableData: any = []
  private OrderNum: number = 0
  @Prop({ default: false }) private queryLoanInfoDialog
  @Emit("close") private emitClose() {}
  @Watch("queryLoanInfoDialog", { immediate: true }) private openDialog(val) {
    if (val) {
      this.firstrRefreshData();
    }
  }
  private firstrRefreshData() {
    const tableData: any = []
     this.caseOperatorPageService
      .queryCarLoanOrderInfo(this.caseId)
      .subscribe((data) => {
        this.OrderNum = data["totalSize"]
        if(this.OrderNum === 0){
            this.caseOperatorPageService.queryLoanInfo({caseNumber: this.caseNo}).subscribe(data => {
              tableData.push(data)
              this.overdueAmountData = tableData
            });
        } else {
           const query = {
              caseNumber: this.caseNo
            }
            this.caseOperatorPageService.queryRepayCarLoan(query, this.pageService).subscribe(data => {
            tableData.push(data)
            this.overdueAmountData = tableData
          });
        }
    })
  }

  private refreshData() {
      const tableData: any = []
    if(this.OrderNum ===0 ){
        const query = {caseNumber: this.caseNo,page:0,size:200}
        this.caseOperatorPageService.queryRepayLoanInfo(query).subscribe(data => {
        tableData.push(data)
        this.overdueAmountData = tableData
      })
    } else {
       const query = {
              caseNumber: this.caseNo
        }
        this.caseOperatorPageService.queryRepayCarLoan(query, this.pageService).subscribe(data => {
        tableData.push(data)
        this.overdueAmountData = tableData
      });
    }
    
  }



}
</script>
<style lang="less" scoped>
.component.query-loanInfo {
  .header-btn{
    text-align: right;
  }
}
</style>
